<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="Home.css">
		<title>主页</title>
	</head>
	<body>
	   <div class="menu-btn">
	      <i class="fas fa-bars fa-2x"></i>
	    </div>
	  
	    <div class="container">
	        <section class="navigation">
	          <div class="nav-container">
	            <div class="brand">
	              <a href="#!">动漫放映室</a>
	            </div>
	            <nav>
	              <div class="nav-mobile">
	                <a id="nav-toggle" href="#!"><span></span></a>
	              </div>
	              <ul class="nav-list">
	                <li><a href="Home.html">主页Home</a></li>
	                <li><a href="ScreeningRoom.html">放映室</a></li>
	                <li><a href="#!">动漫类型</a>
	                  <ul class="nav-dropdown">
	                    <li><a href="#!">动漫1</a></li>
	                    <li><a href="#!">动漫2</a></li>
	                    <li><a href="#!">动漫3</a></li>
	                  </ul>
	                </li>
	                <li><a href="MyHome.html">我的主页</a></li>
	                <li><a href="#!">联系方式</a></li>
	              </ul>
	            </nav>
	          </div>
	        </section>
		 
		<script type="text/javascript">
		 	window.onload = function() {
		 	    var pictures = document.getElementById("pic").getElementsByTagName("li");
		 	    var buttons = document.getElementById("list").getElementsByTagName("li");
		 	    pictures[0].style.opacity = 1;
		 	
		 	
		 	
		 	    function changeOpacity(index) {
		 	        var x = parseFloat(pictures[index].style.opacity);
		 	        pictures[index].style.opacity = 0.01 + x;
		 	        if (parseFloat(pictures[index].style.opacity) <= 1) {
		 	            var changeTimer = setTimeout(function() { changeOpacity(index); }, 20);
		 	        } else clearTimeout(changeTimer);
		 	    }
		 	
		 	    function changePic(index) {
		 	        for (var i = 0; i < pictures.length; i++) {
		 	            pictures[i].style.opacity = 0;
		 	            buttons[i].className = "";
		 	        }
		 	        changeOpacity(index);
		 	        buttons[index].className = "on";
		 	    }
		 	    for (var i = 0; i < pictures.length; i++) {
		 	        buttons[i].onclick = function() {
		 	            var index = parseInt(this.getAttribute("num")) - 1;
		 	            changePic(index);
		 	        }
		 	    }
		 	
		 	};
		 </script>
		 
	      <div class="targetArea" id="targetArea" title="目标区域">
	          <ul id="pic" title="图片">
	              <li title="图片1"><img src="img/a1.jpg" alt="图片1" title="图片1"></li>
	              <li title="图片2"><img src="img/a2.jpg" alt="图片2" title="图片2"></li>
	              <li title="图片3"><img src="img/w11.jpg" alt="图片3" title="图片3"></li>
	              <li title="图片4"><img src="img/w13.jpg" alt="图片4" title="图片4"></li>
	          </ul>
	          <ol id="list" title="切换图片按钮">
	              <li title="展示图片1" num="1" class="on"><img src="img/a1.jpg" alt="图片1" title="展示图片1"></li>
	              <li title="展示图片2" num="2"><img src="img/a2.jpg" alt="图片2" title="展示图片2"></li>
	              <li title="展示图片3" num="3"><img src="img/w11.jpg" alt="图片3" title="展示图片3"></li>
	              <li title="展示图片4" num="4"><img src="img/w12.jpg" alt="图片4" title="展示图片4"></li>
	          </ol>
	      </div>
	  
	      <section class="home-cards">
	        <div>
	          <img src="img/b1.png" alt="#!">
	          <h3>热门电影</h3>
	          <p>
	            热门动漫电影，根据豆瓣电影排行榜，经典必看，豆瓣评分9分以上
	          </p>
	          <a href="#">了解更多信息
				<i class="fas fa-chevron-right"></i>
			  </a>
	        </div>
	        <div>
	          <img src="img/b2.png" alt="#!" />
	          <h3>连载新番</h3>
	          <p>
	            最新连载日漫，持续更新，根据哔哩哔哩等视频网站，实时更新
	          </p>
	          <a href="#">了解更多信息<i class="fas fa-chevron-right"></i></a>
	        </div>
	        <div>
	          <img src="img/b3.png" alt="#!" />
	          <h3>国创动画</h3>
	          <p>
	            国产原创动画，良心国漫，根据哔哩哔哩、腾讯、爱奇艺等网站实时更新
	          </p>
	          <a href="#">了解更多信息<i class="fas fa-chevron-right"></i></a>
	        </div>
	        <div>
	          <img src="img/b4.png" alt="#!" />
	          <h3>其他动漫</h3>
	          <p>
	            韩国、美国等出品的动漫，电影等，根据各大视频网站实时更新
	          </p>
	          <a href="#">了解更多信息<i class="fas fa-chevron-right"></i></a>
	        </div>
	      </section>
	  
		<p>主页推荐</p>
	  			<section class="home-cards">
	  				<div>
	  					<img src="img/c1.jpg" alt="#!" />
	  					<h3>《龙猫》</h3>
	  					<p>
	  						《龙猫》是由宫崎骏执导，日高法子、坂本千夏、糸井重里配音的动画电影，于1988年4月16日在日本上映。高清重制版于2018年12月14日在中国公映。该片讲述了草壁达郎的妻子草壁靖子生病住院后，他带着草壁皋月与四岁的妹妹草壁梅回到乡间居住的故事。
	  					</p>
	  					<a href="#">
							<i class="fas fa-chevron-right">点击播放</i>
						</a>
	  				</div>
	  				<div>
	  					<img src="./img/c2.jpg" alt="#!" />
	  					<h3>《千与千寻》</h3>
	  					<p>
	  						《千与千寻》由吉卜力工作室制作的动画电影，由宫崎骏执导，柊瑠美、入野自由、中村彰男、夏木真理等人参与配音。该片讲述了千寻意外来到神灵世界后，为了救因惩罚而变成猪的家人，经历许多磨难的故事。
	  					</p>
	  					<a href="#">
							<i class="fas fa-chevron-right">点击播放</i>
						</a>
	  				</div>
	  				<div>
	  					<img src="./img/c3.jpg" alt="#!" />
	  					<h3>《疯狂动物城》</h3>
	  					<p>
	  						该片讲述了在一个所有动物和平共处的动物城市，兔子朱迪通过自己努力奋斗完成自己儿时的梦想，成为动物警察的故事。
	  					</p>
	  					<a href="#">
							<i class="fas fa-chevron-right">点击播放</i>
						</a>
	  				</div>
	  				<div>
	  					<img src="./img/c4.jpg" alt="#!" />
	  					<h3>《寻梦环游记》</h3>
	  					<p>
							该片的灵感源于墨西哥亡灵节，讲述了热爱音乐的小男孩米格和落魄乐手埃克托在五彩斑斓的神秘世界开启了一段奇妙冒险旅程的故事。
	  					</p>
	  					<a href="#">
							<i class="fas fa-chevron-right">点击播放</i>
						</a>
	  				</div>
	        </section>
	       
	        <section class="more">
	            <div class="content">
	            <h2>更多动漫资讯</h2>
			    <a href="#" class="btn">
					<i class="fas fa-chevron-right">点击了解更多内容</i>
			    </a>
	            </div>
	        </section>
	  
	        
	        <section class="join">
	          <div class="content">
	            <h2>加入我们</h2>
	            <p>加入我们，一起建设个性化动漫放映室</p>
	              <a href="#" class="btn">
	                <i class="fas fa-chevron-right">点击了解更多信息</i>
	              </a>
	          </div>
	        </section>
			
	      </div>
	        <section class="links">
	          <div class="links-inner">
	            <ul>
	              <li><h3>联系信息</h3></li>
	            </ul>
	            <ul>
	              <li><h3>网站备案信息</h3></li>	              
	            </ul>
	            <ul>
	              <li><h3>网站友情链接</h3></li>
	            </ul>
	            <ul>
	              <li><h3>网站版权声明</h3></li>              
	            </ul>
	            <ul>
	              <li><h3>企业信息</h3></li>	              
	            </ul>
	            <ul>
	              <li><h3>特别鸣谢</h3></li>	              
	            </ul>
	          </div>
	        </section>
	  
	        <footer class="footer">
				 <div class="footer-inner">
					<div>
					   <i class="fas fa-globe fa-2x">动漫放映室</i>
					</div>
					<ul>
					  <li><a href="#">联系我们</a></li>
							<li><a href="#">相关信息</a></li>
							<li><a href="#">网站支持</a></li>
							<li><a href="#">网站安全</a></li>
							<li><a href="#">特别鸣谢</a></li>
							<li><a href="#">企业信息</a></li>
							<li><a href="#">更多资讯</a></li>
							<li><a href="#">&copy;版权信息</a></li>
					</ul>
				  </div>
	        </footer>
	
	</body>
</html>

